<template>
    <el-dialog
        :visible.sync="dialogState"
        width="640px"
        :close-on-click-modal="false"
        :before-close="dialogClose"
    >
        <div class="dialog-title" slot="title">编辑店铺信息</div>
        <div class="dialog-body">
            <el-form ref="form" :model="form" label-width="140px">
                <el-form-item label="店铺照片" prop="storePic" :rules="[{required:true,message:'请上传店铺照片',trigger:'blur'}]">
                    <el-upload
                        drag
                        action="/server/api/system/uploadFile"
                        :show-file-list="false"
                        :on-success="uploadStorePic"
                        :style="{height:'120px',width:'180px'}"
                    >
                        <img v-if="form.storePic != ''" :src="form.storePic" width="180" height="120" class="avatar">
                        <i v-else class="el-icon-upload"></i>
                    </el-upload>
                    <p style="line-height:20px;margin:0px 0px;">店铺请务必上传彩色原件扫描件或数码照 否则影响结算，仅仅支持JPG,JPEG,PNG 的图片格式，且单张图片小于不超过2M。</p>
                </el-form-item>
                <el-form-item label="店铺名称" prop="storeName" :rules="[{required:true,message:'请输入店铺名称',trigger:'blur'}]">
                    <el-input v-model="form.storeName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="店铺地址" prop="storeAddress" :rules="[{required:true,message:'请输入店铺地址',trigger:'blur'}]">
                    <el-input v-model="form.storeAddress" size="small"></el-input>
                </el-form-item>
                <el-form-item label="店铺电话" prop="storePhone" :rules="[{required:true,message:'请输入店铺电话',trigger:'blur'}]">
                    <el-input v-model="form.storePhone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="营业时间" prop="storeHours" :rules="[{required:true,message:'请输入营业时间',trigger:'blur'}]">
                    <el-input v-model="form.storeHours" size="small"></el-input>
                </el-form-item>
                <el-form-item label="经营商品" prop="storeGoods" :rules="[{required:true,message:'请输入经营商品',trigger:'blur'}]">
                    <el-input type="textarea" v-model="form.storeGoods" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')" size="small" style="width:100px;">更新</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        data(){
            return {
                dialogState:false,
                form:{
                    mchNo:"",           // 商户编号
                    storePic:"",        // 店铺照片
                    storeName:"",       // 店铺名称
                    storeAddress:"",    // 店铺地址
                    storePhone:"",      // 店铺电话
                    storeHours:"",      // 店铺营业时间
                    storeGoods:"",      // 店铺经营范围
                    storeId:"",         // 店铺ID
                },
            }
        },
        methods:{
            // 提交数据
            onSubmit(form){
                this.$refs[form].validate((valid) => {
                    if(valid){
                        this.$http.post('/api/altmch/modifyMchStore', this.form).then(result => {
                            if(result.code == 200){
                                this.$message.success(result.msg);
                                this.dialogClose();
                                this.$emit('refersh');
                            }else{
                                this.$message.error(result.msg);
                            }
                        });
                    }
                });
            },
            // 上传店铺照片
            uploadStorePic(response, file, fileList){
                if(response.code == 200){
                    this.form.storePic = response.data;
                }else{
                    this.$message.error(response.msg);
                }
            },
            // 显示弹窗
            openDialog(e){
                this.$http.get('/api/altmch/mchStore', {params:{mchNo:e.mchNo}}).then(result => {
                    if(result.code == 200){
                        this.form = result.data;
                        this.dialogState = true;
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            },
            // 关闭回调
            dialogClose(e){
                this.dialogState = false;
                this.$refs['form'].resetFields();
            }
        }
    }
</script>

<style lang="less" scoped>
    .dialog-title{
        height:30px;
        border-bottom:1px solid #EEEEEE;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
    }
    .dialog-body{
        ::v-deep(.el-upload){
            .el-upload-dragger{
                height:120px;
                width:180px;
            }
        }
    }
</style>
